<script>
  init({
    title: 'Issue #2211',
    desc: 'Rotated table column headers(<a href="https://github.com/wenzhixin/bootstrap-table/issues/2211" target="_blank">#2211</a>).',
    links: ['bootstrap-table.min.css'],
    scripts: ['bootstrap-table.min.js']
  })

</script>

<style>
    .bootstrap-table .fixed-table-container .table thead th .th-inner {
        overflow: inherit;
    }

    .table-header-rotated td.id {
        font-weight: bold;
    }

    .table-header-rotated th {
        height: 120px;
        white-space: nowrap;
    }

    .table-header-rotated th:not(.id) > div {
        transform: translate(-9px, 0px) rotate(-45deg);
        width: 30px;
    }

    .table-header-rotated th > div > span {
        padding: 5px 10px;
    }
</style>

<table
        data-classes="table table-hover table-header-rotated"
        data-toggle="table"
        data-url="json/data5.json"
        id="table">
    <thead>
    <tr>
        <th class="id" data-field="id" data-formatter="Row %s" data-width="100"></th>
        <th data-field="name">Item Name</th>
        <th data-field="price">Item Price</th>
        <th data-field="column1">Item Column1</th>
        <th data-field="column2">Item Column2</th>
        <th data-field="column3">Item Column3</th>
        <th data-field="column4">Item Column4</th>
    </tr>
    </thead>
</table>
